<template>
    <div class="cell">
        <div class="left">
            <el-button-group>
                <el-button
                    @click="unselect"
                    icon="el-icon-arrow-left">
                </el-button>
                <el-button
                    @click="up"
                    icon="el-icon-arrow-up">
                </el-button>
                <el-button
                    @click="down"
                    icon="el-icon-arrow-down">
                </el-button>
            </el-button-group>
            <el-select v-model="factor" placeholder="请绑定表达式因子">
                <el-option
                    v-for="factor in factorsUnselected"
                    :key="factor"
                    :label="factor"
                    :value="factor">
                </el-option>
            </el-select>
        </div>
        <div class="right">
            <div class="mainText">{{mainText}}</div>
            <div class="subText">{{subText}}</div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            factor: null
        }
    },
    props: ["dependency", "factors", "factorsSelection"],
    watch: {
        factors: function (val, oldVal) {
            let existed = false;
            for(let i = 0; i < this.factors.length; i++) {
                let factor = this.factors[i];
                if(this.factor == factor) {
                    existed = true;
                    break;
                }
            }
            if(!existed) {
                this.factor = "";
            }
        },
        factor: function (val, oldVal) {
            /**
             * @param this.dependency 用于删除依赖时归还因子
             */
             this.factor && this.$emit("factorSelect", val, oldVal, this.dependency);
        }
    },
    computed: {
        factorsUnselected() {
            let factorsUnselected = [];
            for(let i = 0; i < this.factors.length; i++) {
                let factor = this.factors[i];
                if(!this.factorsSelection[factor]) {
                    factorsUnselected.push(factor);
                }
            }
            return factorsUnselected;
        },
        mainText() {
            if(this.dependency) {
                if(this.dependency.dependencyType == 1 && this.dependency.dependencyOpcTag) {
                    return this.dependency.dependencyOpcTag.code;
                } else if(this.dependency.dependencyType == 2 && this.dependency.dependencyCalItem) {
                    return this.dependency.dependencyCalItem.code;
                }
            }
            return "";
        },
        subText() {
            if(this.dependency) {
                if(this.dependency.dependencyType == 1 && this.dependency.dependencyOpcTag) {
                    return this.dependency.dependencyOpcTag.name;
                } else if(this.dependency.dependencyType == 2 && this.dependency.dependencyCalItem) {
                    return this.dependency.dependencyCalItem.name;
                }
            }
            return "";
        }
    },
    methods: {
        unselect() {
            this.$emit("unselect", this.dependency);
        },
        up() {
            this.$emit("up", this.dependency);
        },
        down() {
            this.$emit("down", this.dependency);
        }
    }
};
</script>

<style lang="less" scoped>

.cell {
    display: flex;
    flex-flow: row nowrap;

    box-sizing: border-box;
    border: 2px solid #E6A23C;
    padding: 6px;
    margin: 4px;

    .left {
        flex: none;
    }

    .right {
        flex: auto;

        display: flex;
        flex-flow: column nowrap;
        text-align: right;
        font-size: 12px;
        line-height: 16px;

        .mainText {
            font-size: 14px;
            margin-bottom: 4px;
        }

        .subText {
            font-size: 14px;
            margin-bottom: 4px;
        }
    }
}


</style>